<template>
  <div class="content">
    <div class="title-block">
      <div class="title-content">
        <h2>微页面标题</h2>
      </div>
      <div class="title-desc">
        <p>标题内容</p>
      </div>
    </div>
    <div class="text-blocks-container">
      <div class="text-block-container">
        <div 
          v-for="(block, index) in textBlocks" 
          :key="index" 
          class="text-block" 
          :class="{ 'selected': selectedBlockId === block.id }"
          @click="handleBlockClick(block.id)"
          :style="{
            textAlign: block.textAlign
          }"
        >
          <div 
            class="block-title"
            :style="{
              fontSize: block.titleSize + 'px',
              fontWeight: block.titleWeight
            }"
          >
            <h3>{{ block.title }}</h3>
          </div>
          <div 
            class="block-subtitle"
            :style="{
              fontWeight: block.titleWeight,
              fontSize: block.subTitleSize + 'px'
            }"
          >
            <p>{{ block.subtitle }}</p>
          </div>
        </div>
      </div>
      <div v-if="textBlocks.length === 0" class="count-info">
        <p>暂无文本内容，请从左侧添加</p>
      </div>
    </div>
  </div>
</template>
<script setup>
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
    textBlocks: {
        type: Array,
        default: () => []
    },
    selectedBlockId: {
        type: [Number, String, null],
        default: null
    }
})

const emit = defineEmits(['select-block'])

const handleBlockClick = (blockId) => {
    emit('select-block', blockId)
}
</script>
<style scoped>
.content {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #eee;
}

.title-block {
    width: 80%;
    height: 90%;
    background-color: #eee;
    margin: 20px auto;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.title-content {
    background-color: white;
}

h2 {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
}

.title-desc {
    padding: 0 5px;
    border: 2px solid #ff7a00;
}

.text-blocks-container {
    width: 80%;
    margin-top: 20px;
    padding:10px;
}

.text-block{
    background-color: white;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.block-title {
    margin: 0 0 10px 0;
    /* 外边距 */
    color: #333;
    /* 字体颜色 */
    font-size: 18px;
    /* 字体大小 */
    font-weight: bold;
}

.block-subtitle {
    margin: 0;
    /* 外边距 */
    color: #666;
    /* 字体颜色 */
    font-size: 14px;
    /* 字体大小 */
}

.count-info {
    text-align: center;
    color: #999;
    font-size: 12px;
    margin-top: 10px;
}

.text-block.selected {
    border: 2px solid #ff7a00;
    box-shadow: 0 0 10px rgba(255, 122, 0, 0.3);
}
</style>